<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${session.lang == 'en' ? menu.titleEn : menu.title}"></title>
    <meta name="keywords" th:content="${companyProfile.seoKeyword}">
    <meta name="description" th:content="${companyProfile.seoDescription}">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../statics/css/amazeui.min.css">
    <link rel="stylesheet" href="../statics/css/animate.css">
    <link rel="stylesheet" href="../statics/css/layout.css">
    <link rel="stylesheet" href="../statics/iconfont/iconfont.css">
    <link rel="stylesheet" href="../statics/css/pages.css">
    <link rel="stylesheet" href="../statics/css/demo.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="../statics/css//swiper/swiper.min.css"/>
    <link rel="stylesheet" href="../statics/css/venobox/venobox.css" type="text/css" media="screen"/>
    <script src="../statics/js/jquery-1.11.0.min.js"></script>
    <script src="../statics/js/amazeui.min.js"></script>
    <script src="../statics/js/amazeui.lazyload.min.js"></script>
    <script type="text/javascript" src="../statics/js/venobox/venobox.min.js"></script>
    <style>
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            overflow: hidden;
            visibility: hidden;
            clear: both;
            width: 100%
        }

        .client-wrap {
            max-width: 1400px;
            margin: 0 auto;
        }

        .client-wrap .client-content {
            width: 100%;
        }

        @media (min-width: 992px) {
            .client-wrap .client-content {
                width: 100%;
                margin: 120px 0;
            }

            .client-wrap .client-content img {
                float: left;
                width: 23.5%;
                margin-right: 2%;
                height: 180px;
            }

            .client-wrap .client-content img:nth-of-type(4n) {
                margin-right: 0;
            }
        }

        @media (max-width: 991px) {
            .client-wrap .client-content {
                width: 100%;
                margin: 40px 0;
            }

            .client-wrap .client-content img {
                float: left;
                width: 48%;
                margin-right: 4%;
                height: 120px;
            }

            .client-wrap .client-content img:nth-of-type(2n+1) {
                margin-right: 0;
            }
        }
    </style>
</head>
<body>
<div th:replace="header :: header"></div>
<div class="am-slider-i2">
    <ul class="am-slides">
        <li class="am-slider-images" th:style="'background-image: url(' + ${menu.bgImage} + ');'">
            <div class="am-container am-slider-desc">
                <div class="am-slider-content">
                    <h3 class="up-en am-slider-title am-animation-slide-left" data-am-scrollspy="{animation: 'slide-left', delay: 100}" style="color:#fff;">
                        <th:block th:text="${menu.title}"></th:block>
                    </h3>
                    <h3 class="up-cn am-animation-slide-right" data-am-scrollspy="{animation:'slide-right', delay: 500}" style="color:#fff;">
                        <th:block th:text="${menu.titleEn}"></th:block>
                    </h3>
                    <i data-am-scrollspy="{animation:'slide-bottom', delay: 700}" class="am-animation-slide-bottom"></i>
                    <div data-am-scrollspy="{animation:'slide-left', delay: 1200}" class="rb-bantxt am-animation-slide-right">
                        <th:block th:text="${session.lang == 'en' ? menu.descriptionEn : menu.description}"></th:block>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
<div class="client-wrap">
    <div class="client-content clearfix">
        <img th:src="${c.logo}" alt="" th:each="c: ${coperativeCustomers}">
    </div>
</div>
<style>
    .swiper-box {
        width: 1200px;
        margin: 0 auto;
        padding: 40px 0;
    }

    .swiper-box .box {
        text-align: center;
    }

    .swiper-box .box .btn {
        display: inline-block;
        margin-right: 20px;
    }

    .swiper-box .box .btn:last-child {
        margin-right: 0;
    }

    .swiper-box .box .btn img {
        cursor: pointer;
    }

    .am-slider-i2 .am-slider-content h2 {
        color: #fff;
        width: 100%;
    }

    .am-slider-i2 .am-slider-content .rb-bantxt {
        color: #fff;
    }

    .am-slider-i2 .am-slider-content i {
        background-color: #fff
    }

    .serviceList {
        overflow: hidden;
        width: 100%;
        padding: 100px 10px;
    }

    .serviceList .item {
        padding: 10px;
    }

    .serviceList .item .itemBox {
        background: #000;
    }

    .serviceList .item .itemBox img {
        width: 100%;
        position: relative;
        transition: all 0.3s;
    }

    .serviceList .item .itemBox .texts {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 85%;
    }

    .serviceList .item .itemBox .texts h2 {
        font-size: 30px;
        color: #fd6100;
        line-height: 2em;
        font-weight: 500;
    }

    .serviceList .item .itemBox .texts h3 {
        font-size: 24px;
        color: #333;
        font-weight: 500;
        font-family: Arial, Helvetica, sans-serif;
        text-transform: uppercase;
    }

    .serviceList .item .itemBox .texts p {
        color: #fff;
        font-size: 14px;
        display: none;
        line-height: 2em;
    }

    .serviceList .item .itemBox .texts i {
        background-color: #000;
        width: 30px;
        height: 2px;
        margin: 20px auto;
        display: none;
    }

    .serviceList .item .itemBox:hover img {
        opacity: 0.5;
    }

    .serviceList .item .itemBox:hover h3 {
        color: #fff;
    }

    .serviceList .item .itemBox:hover p,
    .serviceList .item .itemBox:hover i {
        display: block;
    }

    .rb-footer {
        border-top: 1px solid #f6f5f5;
        background: #fff;
    }

    @media (max-width: 767px) {
        .serviceList {
            padding: 20px 5px;
        }

        .swiper-box {
            width: 100% !important;
        }

        .serviceList .item .itemBox .texts h2 {
            font-size: 24px;
        }

        .serviceList .item .itemBox .texts h3 {
            font-size: 18px;
        }
    }
</style>

<!--#include file="/public/html/footer.html"-->
<div th:replace="footer :: footer"></div>
<script src="../statics/js/canvas.js"></script>
<script src="../statics/js/swiper/swiper.min.js"></script>
<script src="../statics/js/wow.min.js"></script>
<script src="../statics/js/common.js"></script>
<script>
    var _len = $('#partnerSwiper .swiper-slide')
    var _num
    if (_len <= 3) {
        _num = 1
    } else if (_len <= 6 && _len > 3) {
        _len = 2
    } else {
        len = 3
    }
    var partnerSwipers = creatSwiper("#partnerSwiper", {
        slidesPerView: 4,
        slidesPerColumn: _num,
        spaceBetween: 50,
        breakpoints: {
            1366: {
                spaceBetween: 25
            },
            768: {
                slidesPerView: 2,
                slidesPerGroup: 2,
                slidesPerColumn: 1,
                spaceBetween: 20
            }
        }
    })
</script>
</body>
</html>